<template>
  <div class="admin-nav_wrapper">
    <div class="nav-item_box" v-for="item in navList" :key="item.nid">
      <div class="nav-title">
        <span>{{ item.grou }}</span>
        <i class="iconfont icon-shanchu" @click="deleteNav(item.nid)"></i>
      </div>
      <div class="nav-content">
        <template v-if="item.children">
          <div class="nav-content_item" v-for="items in item.children" :key="items.nid">
            <div class="logo">
              <span>{{ items.title }}</span>
            </div>
            <div class="options">
              <i class="iconfont icon-edit" @click="editNav('2', items.nid)"></i>
              <i class="iconfont icon-shanchu" @click="deleteNav(items.nid)"></i>
            </div>
          </div>
        </template>
        <div class="nav-content_add nav-content_item" @click="addNav('2', item.nid, item.grou)">
          <i class="iconfont icon-add"></i>
        </div>
      </div>
    </div>
    <div class="nav-item_add">
      <i class="iconfont icon-add" @click="addNav('1')"></i>
    </div>
    <NavModal
      :is-show.sync="isShow"
      :modalType="modalType"
      :content="content"
      @queryClick="queryClick"
    />
  </div>
</template>

<script>
import NavModal from './nav-modal.vue'
import api from '../../../api/nav'
export default {
  components: {
    NavModal
  },
  data() {
    return {
      navList: [],
      isShow: false,
      modalType: '',
      pid: '',
      content: {},
      isUpdate: false
    }
  },
  methods: {
    // 确认添加导航
    async queryClick(content) {
      const params = {
        pid: this.pid,
        ...content
      }
      try {
        const res = this.isUpdate ? await api.updateNav(params) : await api.addNav(params)
        if (res.code === 200) {
          this.isUpdate = false
          this.getNavList()
        }
      } catch (err) {
        console.log(err)
      }
    },

    // 添加导航
    addNav(type, pid, grou) {
      this.content = {}
      this.content.grou = grou || ''
      this.pid = pid || 0
      this.modalType = type
      this.isShow = true
    },

    // 删除导航
    deleteNav(nid) {
      const params = {
        nid
      }
      const that = this
      this.$Modal.delete({
        onOk: async () => {
          try {
            const res = await api.deleteNav(params)
            if (res.code === 200) {
              that.getNavList()
            }
          } catch (err) {
            console.log(err)
          }
        }
      })
    },

    // 编辑导航
    async editNav(type, nid) {
      this.modalType = type
      const params = { nid }
      try {
        const res = await api.getNavDetail(params)
        if (res.code === 200) {
          this.content = res.data[0]
          console.log(this.content, 'xx')
        }
      } catch (err) {
        console.log(err)
      }
      this.isShow = true
      this.isUpdate = true
    },

    // 获取导航列表
    async getNavList() {
      try {
        const res = await api.getNavList()
        if (res.code === 200) {
          this.navList = res.data
        }
      } catch (err) {
        console.log(err)
      }
    }
  },
  mounted() {
    this.getNavList()
  }
}
</script>
